<template>
	<view class='head' @click="login">
		<img src="@/static/default-avatar.png" class='img'>
		<view class="text">
			<view class="top1">
				{{num}}
			</view>
			<view class="bottom1">
				{{num}}
			</view>
		</view>
	</view>
	<view class="main">
		<view class="money">
			<view class="left">
				<view class="top" style="color: red;">
					<text>0</text>
					<text>&nbsp;&nbsp;&nbsp;0</text>
					<text>0</text>
				</view>
				<view class="bottom">
					<text>账户余额</text>
					<text>积分</text>
					<text>优惠券</text>
				</view>
			</view>
			<view class="right">
				<view class="top">
					<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
				</view>
				<view class="bottom">
					<text>我的钱包</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="li">
				<view class="top">
					<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
				</view>
				<text>全部订单</text>
			</view>
			<view class="li">
				<view class="top">
					<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
				</view>
				<text>待支付</text>
			</view>
			<view class="li">
				<view class="top">
					<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
				</view>
				<text>待发货</text>
			</view>
			<view class="li">
				<view class="top">
					<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
				</view>
				<text>待收货</text>
			</view>
		</view>
		<view class="foot">
			<view class="fuwu">
				<text>我的服务</text>
			</view>
			<view class="footlist">
				<view class="ui">
					<view class="top">
						<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
					</view>
					<text>收获地址</text>
				</view>
				<view class="ui">
					<view class="top">
						<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
					</view>
					<text>领券中心</text>
				</view>
				<view class="ui">
					<view class="top">
						<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
					</view>
					<text>优惠券</text>
				</view>
				<view class="ui">
					<view class="top">
						<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
					</view>
					<text>我的帮助</text>
				</view>
				<view class="ui">
					<view class="top">
						<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
					</view>
					<text>我的积分</text>
				</view>
				<view class="ui">
					<view class="top">
						<img src="@/static/tabbar/user.png" class="ic" alt="我的钱包">
					</view>
					<text>退换/售后</text>
				</view>
			</view>
		</view>
	</view>
	<button class="btn" v-if="isLogin" @click="out">退出</button>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	import {
		userApi
	} from "@/apis/my.js";
	import {
		useStore
	} from 'vuex'
	import {
		onShow
	} from "@dcloudio/uni-app"

	const num = ref('--')
	const store = useStore()
	// 检测有无token定义登录状态
	const isLogin = computed(() => store.state.user.userInfo.token)
	// 获取用户信息
	const getUser = async () => {
		const res = await userApi()
		// 发请求成功
		if (res.status === 200) {
			num.value = res.data.userInfo.mobile

		}
	}
	// 登录
	const login = () => {
		if (num.value == '--') {
			wx.navigateTo({
				url: '/pages/login/login'
			});
		}
	}
	// 退出登录
	const out = () => {
		// 弹出提示框
		uni.showModal({
			title: '提示',
			content: '确认退出吗',
			success: async (res) => {
				// 确认退出清除token和用户信息
				if (res.confirm) {
					store.commit(`user/delToken`)
					num.value = '--'
				}
			}
		})
	}
	onShow(() => {
		getUser()
	})
</script>

<style lang="scss">
	.footlist {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
		margin-left: 40rpx;
	}

	.foot {
		background-color: #fff;
		height: 320rpx;
		width: 94%;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;

	}

	.ui {
		width: 160rpx;
		text-align: center;
		margin-top: 20rpx;

	}

	.fuwu {

		color: #333;
		font-weight: 550;
	}

	.list {
		background-color: #fff;
		margin-top: 20rpx;
		width: 94%;
		height: 120rpx;
		display: flex;
		justify-content: space-evenly;
		padding-top: 20rpx;
		margin-left: 20rpx;

		margin-bottom: 20rpx;
		flex-wrap: wrap;
	}

	.left {
		border-right: 4rpx solid #eeeeee;
		height: 100rpx;
		width: 600rpx;

	}

	.ic {
		width: 60rpx;
		height: 60rpx;
	}

	.top {
		height: 60rpx;
		display: flex;
		justify-content: space-evenly;
		line-height: 60rpx;
	}

	.bottom {
		display: flex;
		justify-content: space-evenly;
	}

	.right {
		width: 180rpx;
		height: 100rpx;
	}

	.money {
		background-color: #fff;
		display: flex;
		justify-content: center;
		width: 100%;
		height: 120rpx;
		// padding: 20rpx;
		padding-right: 60rpx;
		padding-top: 20rpx;
	}

	.main {
		background-color: #fafafa;
		color: #545454;
		font-size: 32rpx;
	}

	.head {
		width: 100%;
		height: 240rpx;
		background-image: url(@/static/background/user-header2.png);
		display: flex;
	}

	.img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-top: 80rpx;
		margin-left: 40rpx;
		margin-right: 20rpx;
	}

	.text {
		margin-top: 80rpx;
	}

	.top1 {
		font-size: 32rpx;
		color: #be9c54;
	}

	.bottom1 {
		font-size: 28rpx;
		color: #be9c54;
	}

	.btn {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 40rpx;
	}
</style>